<template>
  <div class="count">
    <div class="left" @click="setFullStatus">
      <input type="checkbox" name="" id="" :checked="FullStatus" />
      <i :class="FullStatus == true ? 'active' : ''"></i>
      <span>全选({{ totalCount }})</span>
    </div>
    <div class="right" v-if="!istoggle">
      <span>￥{{ totalPrice | setCount }}</span>
      <button @click="goPay">立即下单</button>
    </div>
    <div class="btns" v-else>
      <div class="collect" @click="clickCollect">收藏</div>
      <div class="delete" @click="deleteCart">删除</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {};
  },
  props: {
    productIdList: {
      type: Array,
    },
    cartIdList: {
      type: Array,
    },
    FullStatus: {
      type: Boolean,
    },
    totalCount: {
      type: Number,
    },
    totalPrice: {
      type: Number,
    },
    istoggle: {
      type: Boolean,
    },
  },
  filters: {
    setCount(val) {
      return val.toFixed(2);
    },
  },
  methods: {
    // 全选、取消全选
    setFullStatus() {
      let newFullStatus = !this.FullStatus;
      this.$emit("share-newFullStatus", newFullStatus);
    },

    // 点击支付
    // clickPay() {
    //   let token = localStorage.getItem("token");
    //   let cart = this.cartIdList.join(",");
    //   console.log(cart);
    //   let url = "/api/order/confirm";
    //   let data = {
    //     cartId: cart,
    //   };
    //   let pro = axios({
    //     method: "post",
    //     url: url,
    //     headers: {
    //       "Authori-zation": "Bearer " + token,
    //     },
    //     data: data,
    //   })
    //     .then((res) => {
    //       console.log("支付。。成功", res.data);
    //       this.$toast.show("下单成功", 2000);
    //     })
    //     .catch((err) => {
    //       console.log("支付。。失败");
    //     });
    // },

    // 点击删除
    deleteCart() {
      if (this.cartIdList.length == 0) {
        this.$toast.show("请选择商品", 1000);
        return;
      }

      let token = localStorage.getItem("token");
      // let cart = this.cartIdList.join(",")

      let url = "/api/cart/del";
      let data = {
        ids: this.cartIdList,
      };
      let pro = axios({
        method: "post",
        url: url,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
        data: data,
      })
        .then((res) => {
          let { status } = res.data;
          if (status == 200) {
            this.$emit('del-good',this.cartIdList)
            Toast.success('删除成功');
          } else {
            Toast({
              message: "删除失败",
              icon: "close",
            });
          }
          console.log("收藏。。成功", res.data);
        })
        .catch((err) => {
          this.$toast.show("操作失败", 1000);
        });
    },

    // 点击收藏
    clickCollect() {
      if (this.productIdList.length == 0) {
        this.$toast.show("请选择商品", 1000);
        return;
      }

      let token = localStorage.getItem("token");
      // let cart = this.cartIdList.join(",")

      let url = "/api/collect/all";
      let data = {
        id: this.productIdList,
        category: "product",
      };
      let pro = axios({
        method: "post",
        url: url,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
        data: data,
      })
        .then((res) => {
          let { status } = res.data;
          if (status == 200) {
            Toast.success('收藏成功');
          } else {
            Toast({
              message: "收藏失败",
              icon: "close",
            });
          }
          console.log("收藏。。成功", res.data);
        })
        .catch((err) => {
          this.$toast.show("收藏商品失败", 1000);
        });
    },

    // 跳转支付页
    goPay() {
      if(this.cartIdList.length == 0){
        this.$toast.show("请选择商品",700)
        return
      }
      this.$router.push("/order/submit/" + this.cartIdList);
    },
  },
};
</script>

<style lang="scss" scoped>
.count {
  position: fixed;
  left: 0;
  bottom: 49px;
  width: 100%;
  height: 48px;
  padding: 0 15px;
  background-color: #fafafa;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  .left {
    height: 48px;

    display: flex;
    align-items: center;
    span {
      margin-left: 7px;
      color: #282828;
      font-size: 14px;
    }
    input {
      display: none;
      margin: 0;
    }

    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }

    i.active {
      display: inline-block;

      background: url(../../assets/icon/common/cart_yes.png) no-repeat;
      background-size: 55% 55%;
      background-position: center center;
      border-radius: 50%;
      background-color: #e93323;
      border-color: #e93323;
    }
  }
  .right {
    height: 48px;
    display: flex;
    align-items: center;
    button {
      width: 113px;
      height: 35px;
      border: 0;
      outline: none;
      background-color: #fc4141;
      color: #fff;
      font-size: 18px;
      border-radius: 17.5px;
    }
    span {
      font-size: 15px;
      color: #fc4141;
      margin-right: 10px;
    }
  }
  .btns {
    display: flex;
    height: 100%;
    align-items: center;
    > div {
      width: 80px;
      height: 30px;
      border-radius: 15px;
      font-size: 15px;
      text-align: center;
      line-height: 30px;
      margin-left: 13px;
    }
    .collect {
      color: #fc4141;
      border: 1px solid #fc4141;
    }
    .delete {
      color: #ccc;
      border: 1px solid #ccc;
    }
  }
}
</style>